<template>
    <div>
        <el-breadcrumb separator="/">
      <el-breadcrumb-item>
        <router-link to="/user/location">党建地点</router-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item>党建地点详细信息</el-breadcrumb-item>
    </el-breadcrumb>
      <div v-if="selectedLocation">
        <h1>{{ selectedLocation.name }}</h1>
        <img :src="selectedLocation.photo" alt="地点照片" />
        <p><strong>地址:</strong> {{ selectedLocation.address }}</p>
        <p><strong>编号:</strong> {{ selectedLocation.number }}</p>
        <p><strong>余额:</strong> {{ selectedLocation.balance }}</p>
        <p><strong>类型:</strong> {{ selectedLocation.type }}</p>
        <p><strong>内容:</strong> {{ selectedLocation.content }}</p>
      </div>
      <div v-else>
        <p>未找到相关地点信息。</p>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onBeforeUnmount } from 'vue';
  import { useRoute } from 'vue-router';
  
  const locations = ref([]); // 用于存储所有地点信息
  const selectedLocation = ref(null); // 当前选中的地点信息
  const route = useRoute();
  
  onMounted(async () => {
    const storedLocations = localStorage.getItem('locations');
    
    if (storedLocations) {
      locations.value = JSON.parse(storedLocations);
  
      // 获取传递的参数
      const locationId = route.params.locationId;
      const locationName = route.params.locationName;
  
      // 用 locationName 找到对应的地点
      selectedLocation.value = locations.value.find(location => location.name === locationName);
  
      // 如果没有找到，再用 locationId 找
      if (!selectedLocation.value) {
        selectedLocation.value = locations.value.find(location => location.id == locationId);
      }
    }
  });
  
  // 在组件卸载时清除本地存储
  onBeforeUnmount(() => {
    localStorage.removeItem('locations');
    localStorage.removeItem('selectedLocation');
  });
  </script>
  
  <style scoped>
  .breadcrumb {
    list-style-type: none;
    padding: 0;
  }
  .breadcrumb li {
    display: inline;
    margin-right: 5px;
  }
  .breadcrumb li a {
    text-decoration: none;
  }
  </style>
  